<template>
  <div>
    <h2>二组件</h2>
    <p>使用state数据:{{ age }}</p>
    <p>使用getters计算属性:{{ total }}</p>
    <button @click="updateAge(2)">让age+2</button>
    <br />
    <button @click="updateAgeAfter3s(1)">3秒后加1</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      age: 100
    }
  },
  // computed: {
  //   age () {
  //     return this.$store.state.user.age
  //   },
  //   total () {
  //     return this.$store.getters['user/total']
  //   }
  // },
  // methods: {
  //   updateAge (n) {
  //     this.$store.commit('user/updateAge', n)
  //   },
  //   updateAgeAfter3s (m) {
  //     this.$store.dispatch('user/updateAgeAfter3s', m)
  //   }
  // }
  computed: {
    ...mapState('user', { nl: 'age' }), //避免冲突,重命名操作,把vuex中的age更名为nl
    ...mapGetters('user', ['total'])
  },
  methods: {
    ...mapMutations('user', ['updateAge']),
    ...mapActions('user', ['updateAgeAfter3s'])
  }
}
</script>

<style></style>
